<template>
  <div style="background-color: red;width:200px;height: 100px;"></div>
  <div :style="{backgroundColor:'pink', width:'200px', height:'200px'}"></div>
  <div :style="{backgroundColor: isBlue? 'blue': 'black',width:'50px', height:'50px'}"></div>
  <div v-bind:style="myDiv"></div>
</template>

<script setup>
import { reactive, ref } from 'vue';
    const isBlue = ref(true); // 控制第二个div的背景颜色是否为颜色
    const myDiv = reactive({
        backgroundColor:'green',
        width:'100px',
        height:'100px'
    })
</script>